<template>
  <uni-popup ref="uniPopup" type="bottom">
    <view class="pick-box">
      <view class="box-top">
        <view class="top-left" @click="close()">
          取消
        </view>
        <view class="top-right" @click="onConfirm()">
          确定
        </view>
      </view>
      <view class="box-content">
        <picker-view :value="modelValue" class="picker-view" :indicator-style="indicatorStyle" @change="pickerChange"
                     @tap.stop="() => { return }"
        >
          <picker-view-column>
            <view v-for="(item, index) in list" :key="index" class="picker-item">
              {{ item[fields] || item }}
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => ([])
    },
    fields: {
      type: String,
      default: 'value'
    },
    modelValue: {
      type: Array,
      default: () => ([0])
    }
  },
  emits: ['update:modelValue'],
  data() {
    return {
      callBack: null,
      selectValue: [0, 0, 0]
    }
  },
  computed: {
    indicatorStyle() {
      return 'height: 88rpx;'
    }
  },
  methods: {
    open(cb) {
      this.callBack = cb
      this.$refs.uniPopup.open()
    },
    pickerChange(e) {
      this.selectValue = e.detail.value
    },
    close() {
      this.$refs.uniPopup.close()
    },
    onConfirm() {
      const result = { detail: this.list[this.selectValue[0]], index: this.selectValue[0] }
      this.$emit('update:modelValue', this.selectValue)

      this.callBack && this.callBack(result)
      this.$refs.uniPopup.close()
    }
  }
}
</script>

<style lang="scss" scoped>
.pick-box {
  width: 100%;
  height: 600rpx;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;

  .box-top {
    display: flex;
    height: 90rpx;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;

    .top-left {
      padding-left: 30rpx;
      font-size: 35rpx;
      line-height: 70rpx;
      color: #888888;
    }

    .top-right {
      font-size: 35rpx;
      line-height: 70rpx;
      padding-right: 30rpx;
      color: #03cca7;
    }
  }

  .box-content {
    flex: 1;
    padding-top: 30rpx;
    padding-bottom: 10rpx;

    .picker-view {
      width: 100%;
      height: 100%;
      background-color: #ffffff;

      .picker-item {
        font-size: 32rpx;
        height: 88rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
      }
    }
  }
}
</style>
